import React, { useState, useRef } from "react"

const TryRefInterval = () => {
  const [count, setCount] = useState(0)
  let timer

  let timerRef = useRef(null)

  const handleClick = () => {
    setCount(count + 1)
    clearInterval(timer)
    timer = setInterval(() => {
      console.log("hello", count)
    }, 1000)
  }

  const handleClick2 = () => {
    setCount(count + 1)
    clearInterval(timerRef.current)
    timerRef.current = setInterval(() => {
      console.log("hello useRef", count)
    }, 1000)
  }

  return (
    <div>
      <h1>Try Ref Interval</h1>
      <p>Count：{count}</p>
      <div>
        <button onClick={handleClick}>Start</button>
      </div>

      <div>
        <button onClick={handleClick2}>Start useRef</button>
      </div>
    </div>
  )
}

export default TryRefInterval
